<template>

  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-row>
        <el-form-item label="供应商" prop="supplierId">
          <el-select
            v-model="queryParams.supplierId"
            clearable
            filterable
            placeholder="请选择供供应商"
            class="!w-160px"
          >
            <el-option
              v-for="item in supplierList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称" prop="no">
          <el-input
            v-model="queryParams.no"
            placeholder="请输入产品名称"
            clearable
            @keyup.enter="handleQuery"
            class="!w-160px"
          />
        </el-form-item>
        <el-form-item label="付款时间" prop="paymentTime">
          <el-date-picker
            v-model="queryParams.paymentTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-220px"
          />
        </el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
      </el-row>

      <el-row>

        <el-col :span="8">
          付款状态：
          <el-button
            type="warning"
            @click="getListByPayStatus(1)"
            plain
          >
            未付款
          </el-button>
          <el-button
            type="primary"
            @click="getListByPayStatus(2)"
            plain
          >
            已付款
          </el-button>
        </el-col>
        <el-col :span="8">
          时间:
          <el-button
            type="primary"
            plain
          >
            上月
          </el-button>


          <el-button
            type="primary"
            plain
          >
            全年
          </el-button>
        </el-col>

        <el-col :span="8">
          操作：
          <el-button
            type="primary"
            plain
            @click="openForm('create')"
            v-hasPermi="['erp:finance-payment:create']"
          >
            <Icon icon="ep:plus" class="mr-5px"/>
            新增
          </el-button>
          <el-button
            type="success"
            plain
            @click="handleExport"
            :loading="exportLoading"
            v-hasPermi="['erp:finance-payment:export']"
          >
            <Icon icon="ep:download" class="mr-5px"/>
            导出
          </el-button>
          <el-button
            type="danger"
            plain
            @click="handleDelete(selectionList.map((item) => item.id))"
            v-hasPermi="['erp:finance-payment:delete']"
            :disabled="selectionList.length === 0"
          >
            <Icon icon="ep:delete" class="mr-5px"/>
            删除
          </el-button>
        </el-col>

      </el-row>

      <el-row class="mt-15px">
        <el-button @click="handleBatchPayment" type="primary">批量付款申请</el-button>
      </el-row>


    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table
      v-loading="loading"
      :data="list"
      border
      :summary-method="getSummaries" show-summary
      :stripe="true"
      :show-overflow-tooltip="true"
      ref="multipleTableRef"
      @selection-change="handleSelectionChange"
    >
      <el-table-column width="40" label="选择" type="selection"/>
      <el-table-column min-width="180" label="付款单号" align="center" prop="no"/>
      <el-table-column label="供应商"  prop="supplierName" min-width="120px"/>
      <el-table-column label="产品名称"  min-width="200px" prop="productNames">
        <template #default="scope">

          <div
            v-for="(item, index) in  getProductName(scope.row)"
            :key="index"
            style="margin-right: 5px;display: block;vertical-align: middle;line-height: 20px;margin-bottom: 10px;cursor: pointer"
          >
            {{ item }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="金额" align="center"   :formatter="erpPriceTableColumnFormatter" prop="paymentPrice"/>
      <el-table-column label="付款状态" align="center" prop="payStatus">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.ERP_PAY_STATUS" :value="scope.row.payStatus"/>
        </template>
      </el-table-column>
      <el-table-column
        label="付款时间"
        align="center"
        prop="paymentTime"
        :formatter="dateFormatter2"
        width="120px"
      />
      <el-table-column label="支付账户" align="center" min-width="150px" prop="accountName"/>
      <el-table-column label="开票情况" align="center" prop="invoiceStatus">
        <template #default="scope">
          <dict-tag style="cursor: pointer" @click="handleInvoiceStatusClick(scope.row)"
                    :type="DICT_TYPE.ERP_INVOICE_STATUS" :value="scope.row.invoiceStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="开票日期" align="center" prop="invoiceDate"
                       :formatter="dateFormatter2"/>
      <el-table-column label="创建人" align="center" prop="creatorName"/>
      <el-table-column label="备注" align="center" prop="financeUserName"/>
      <el-table-column label="状态" align="center" fixed="right" width="90" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.ERP_AUDIT_STATUS" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="220">
        <template #default="scope">
          <el-button
            link
            @click="openForm('detail', scope.row.id)"
            v-hasPermi="['erp:finance-payment:query']"
          >
            详情
          </el-button>
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['erp:finance-payment:update']"
            :disabled="scope.row.status === 20"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleUpdateStatus(scope.row.id, 20)"
            v-hasPermi="['erp:finance-payment:update-status']"
            v-if="scope.row.status === 10"
          >
            付款
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleUpdateStatus(scope.row.id, 10)"
            v-hasPermi="['erp:finance-payment:update-status']"
            v-else
          >
            反审批
          </el-button>
<!--          <el-button-->
<!--            link-->
<!--            type="danger"-->
<!--            @click="handleDelete([scope.row.id])"-->
<!--            v-hasPermi="['erp:finance-payment:delete']"-->
<!--          >-->
<!--            删除-->
<!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <FinancePaymentForm ref="formRef" @success="getList"/>
</template>

<script setup lang="ts">
import {getIntDictOptions, DICT_TYPE} from '@/utils/dict'
import {dateFormatter2} from '@/utils/formatTime'
import download from '@/utils/download'
import {FinancePaymentApi, FinancePaymentVO} from '@/api/erp/finance/payment'
import FinancePaymentForm from './FinancePaymentForm.vue'
import {UserVO} from '@/api/system/user'
import * as UserApi from '@/api/system/user'
import {erpPriceInputFormatter, erpPriceTableColumnFormatter} from '@/utils'
import {SupplierApi, SupplierVO} from '@/api/erp/purchase/supplier'
import {AccountApi, AccountVO} from '@/api/erp/finance/account'
import {string} from "vue-types";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {OrderApi} from "@/api/dispatch/order";

/** ERP 付款单列表 */
defineOptions({name: 'ErpPurchaseOrder'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<FinancePaymentVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  no: undefined,
  paymentTime: [],
  ids:[],
  supplierId: undefined,
  creator: undefined,
  payStatus: undefined,
  financeUserId: undefined,
  accountId: undefined,
  status: undefined,
  remark: undefined,
  bizNo: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const supplierList = ref<SupplierVO[]>([]) // 供应商列表
const userList = ref<UserVO[]>([]) // 用户列表
const accountList = ref<AccountVO[]>([]) // 账户列表

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await FinancePaymentApi.getFinancePaymentPage(queryParams)
    list.value = data.list
    total.value = data.total
    allTotalPrice.value = data.extendStr;
  } finally {
    loading.value = false
  }
}

const getListByPayStatus = async (payStatus: number) => {
  queryParams.payStatus = payStatus;
  await getList()
}

/** 开票情况点击 */
const handleInvoiceStatusClick = async (row) => {
  const {id, invoiceStatus} = row
  const status = invoiceStatus === 1 ? 2 : 1;
  try {
    // 审批的二次确认
    await message.confirm(`确定${invoiceStatus === 1 ? '开票' : '取消开票'}该付款单吗？`)
    // 发起审批
    await FinancePaymentApi.updateFinanceInvoiceStatus(id, status)
    message.success(`${invoiceStatus === 1 ? '开票' : '取消开票'}成功`)
    // 刷新列表
    await getList()
  } catch {
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.payStatus = undefined;
  queryParams.ids =[];
  queryFormRef.value.resetFields()
  handleQuery()
}


const multipleTableRef = ref()


/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (ids: number[]) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await FinancePaymentApi.deleteFinancePayment(ids)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
    selectionList.value = selectionList.value.filter((item) => !ids.includes(item.id))
  } catch {
  }
}



/**
 * 批量付款
 */
const handleBatchPayment = async () => {

  if (selectionList.value.length == 0) {
    ElMessage.error('请选择要付款的订单');
    return;
  }

  let loading;
  ElMessageBox.confirm('确定批量付款吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    loading = ElLoading.service({
      lock: true,
      text: '处理中...',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    await FinancePaymentApi.batchPayment(selectionList.value);
    ElMessage.success('处理成功');
  }).finally(() => {
    multipleTableRef.value!.clearSelection()
    getList();
    loading.close();
  })
}

/**
 * 获取产品名称信息
 * @param row
 */
const getProductName = (row) => {
  let items = row.items;
  let names = [];
  for (const key in items) {
    names = names.concat(items[key].productNames);
  }
  return names;
}

/** 审批/反审批操作 */
const handleUpdateStatus = async (id: number, status: number) => {
  try {
    // 审批的二次确认
    await message.confirm(`确定${status === 20 ? '审批' : '反审批'}该付款单吗？`)
    // 发起审批
    await FinancePaymentApi.updateFinancePaymentStatus(id, status)
    message.success(`${status === 20 ? '审批' : '反审批'}成功`)
    // 刷新列表
    await getList()
  } catch {
  }
}

/**
 * 总金额
 */
const allTotalPrice = ref(0);
const getSummaries = (param) => {

  const {columns, data} = param
  const sums: string[] = []
  columns.forEach((column, index: number) => {

    if (['paymentPrice'].includes(column.property)) {
      sums[index] = '' + erpPriceInputFormatter(allTotalPrice.value);
    } else {
      sums[index] = ''
    }
  })

  return sums
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await FinancePaymentApi.exportFinancePayment(queryParams)
    download.excel(data, '付款单.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 选中操作 */
const selectionList = ref<FinancePaymentVO[]>([])
const handleSelectionChange = (rows: FinancePaymentVO[]) => {
  selectionList.value = rows
}

/** 初始化 **/
onMounted(async () => {

  let query = route.query;
  if (query.doType == 'query') {
    queryParams.ids = query.data;
  }
  handleQuery();
  // 加载供应商、用户、账户
  supplierList.value = await SupplierApi.getSupplierSimpleList()
  userList.value = await UserApi.getSimpleUserList()
  accountList.value = await AccountApi.getAccountSimpleList()
})

const route = useRoute();
onActivated(() => {

  let query = route.query;
  if (query.doType == 'query') {
    queryParams.ids = query.data;
  }

  handleQuery();
});
</script>
